<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的-京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
    <meta name="description"
        content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">
    <meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4088349_85gd2b62co6.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>

    <!-- 1. 页面顶部广告栏 -->
    <div class="advert">
        <div class="jd_container advert-center">
            <img src="./images/1.png" alt="">
            <!-- 关闭按钮 -->
            <a href="javascript:;" class="close">X</a>
        </div>
    </div>

    <!-- 2.顶部区域  -->
    <div class="shortcut">
        <div class="jd_container">
            <!-- 左侧城市选择 -->
            <div class="header_l">
                <div class="location">
                    <i class="iconfont icon-weizhi"></i> <span>云南</span>
                </div>
                <div class="select">
                    <div class="item"><a href="javascript:;">北京</a></div>
                    <div class="item"><a href="javascript:;">上海</a></div>
                    <div class="item"><a href="javascript:;">深圳</a></div>
                    <div class="item"><a href="javascript:;">天津</a></div>
                </div>

            </div>
            <!-- 右侧内容导航区域 -->
            <div class="header_r">
                <a href="##">你好，请登录 免费注册</a>
                <a href="##"> 我的订单</a>
                <a href="">我的京东</a>
            </div>

        </div>
    </div>

    <!-- 3. 京东搜索区域 -->
    <div id="header">
        <div class="jd_container">
            <!-- 左侧logo -->
            <div class="logo" id='logo'>
                <a href=""></a>
            </div>
            <!-- 搜索区域 -->
            <div id="search">
                <div class="form">
                    <div id="J_searchbg" class="search_bg">电脑主机</div>
                    <input type="text" id='input' class="text" name="" id="">
                    <span class="span">
                        <i class="iconfont icon-zhaoxiangji"></i>
                    </span>
                    <button class="button">
                        <i class="iconfont icon-sousuo"></i>
                    </button>
                </div>
            </div>

            <!-- 右侧图片 -->
            <div class="treasure">
                <a href=""></a>
            </div>
        </div>
    </div>

    <!-- 4. 轮播图区域 -->
    <div class="fs">
        <!-- 中间内容区域 -->
        <div class="grid_inner jd_container">
            <!-- 左侧侧边栏 -->
            <div class="fs_col1">
                <ul class="cate_menu">
                    <li class="cate_menu_item"><a href="" class="cate_menu_lk">家用电器</a></li>
                    <li class="cate_menu_item">
                        <a href="" class="cate_menu_lk">手机</a>
                        <span class="cate_menu_line">/</span>
                        <a href="" class="cate_menu_lk">运营商</a>
                        <span class="cate_menu_line">/</span>
                        <a href="" class="cate_menu_lk">数码</a>

                    </li>
                    <li class="cate_menu_item">
                        <a href="" class="cate_menu_lk">电脑</a>
                        <span class="cate_menu_line">/</span>
                        <a href="" class="cate_menu_lk">办公</a>
                    </li>
                    <li class="cate_menu_item">
                        <a href="" class="cate_menu_lk">家具</a>
                        <span class="cate_menu_line">/</span>
                        <a href="" class="cate_menu_lk">家具</a>
                        <span class="cate_menu_line">/</span>
                        <a href="" class="cate_menu_lk">家装</a>
                        <span class="cate_menu_line">/</span>
                        <a href="" class="cate_menu_lk">厨具</a>
                    </li>
                </ul>
                <div class="cate_pop">
                    <div class="cate_part">111</div>
                    <div class="cate_part">222</div>
                    <div class="cate_part">333</div>
                    <div class="cate_part">444</div>
                </div>
            </div>
            <!-- 中间轮播图 -->
            <div class="fs_col2">
                <div class="focus">
                    <!-- 轮播图 -->
                    <div class="sliderBannerWrapper">
                        <div class="slider sliderBanner">
                            <ul>
                                <li class="show">
                                    <a href="">
                                        <img src="./images/q.jpg" alt="">
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="./images/q1.jpg" alt="">
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="./images/q2.jpg" alt="">
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="./images/q3.png" alt="">
                                    </a>
                                </li>
                            </ul>
                            <!-- 左右按钮 -->
                            <a href="javascript:;" class="iconfont icon-zuojiantou1"></a>
                            <a href="javascript:;" class="iconfont icon-youjiantou1"></a>
                            <!-- 轮播点 -->
                            <div class="circle">
                                <span class="active"></span>
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </div>

                    </div>
                    <!-- 主轮播图右侧轮播区域 -->
                    <div class="sliderRecommendWrapper">
                        <div class="item"><img src="./images/banner1.png" alt=""></div>
                        <div class="item"><img src="./images/banner2.png" alt=""></div>
                        <div class="item"><img src="./images/banner3.png" alt=""></div>
                        <!-- 左右按钮 -->
                        <a href="javascript:;" class="iconfont icon-zuojiantou1"></a>
                        <a href="javascript:;" class="iconfont icon-youjiantou1"></a>
                    </div>
                </div>
            </div>
            <!-- 右侧区域 -->
            <div class="fs_col3"></div>
        </div>
        <!-- 定义的两侧图片背景 -->
        <div class="grid_out"></div>
    </div>

    <!-- 5. 京东秒杀 -->
    <div class="seckill item_ele">
        <div class="jd_container seckill__inner">
            <!-- 京东秒杀红色区域 -->
            <a href="javascript:;" class="seckill-countdown">
                <div class="countdown-title">京东秒杀</div>
                <div>
                    <div class="countdown-desc"><strong>10:00</strong>点场 距结束</div>
                    <span class="timmer countdown-main">
                        <span class="timmer__unit timmer__unit--hour">00</span>
                        <span class="timmer__unit timmer__unit--minute">55</span>
                        <span class="timmer__unit timmer__unit--second">29</span>
                    </span>
                </div>
            </a>
            <!-- 秒杀无缝轮播 -->
            <div class="seckill-list">
                <ul class="slider_wrapper">
                    <li>
                        <img src="./images/wufeng1.png" alt="">
                    </li>
                    <li>
                        <img src="./images/wufeng2.png" alt="">
                    </li>
                    <li>
                        <img src="./images/wufeng3.png" alt="">
                    </li>
                    <li>
                        <img src="./images/wufeng1.png" alt="">
                    </li>
                </ul>
                <!-- 左右按钮 -->
                 <!-- 左右按钮 -->
                 <a href="javascript:;" class="iconfont icon-zuojiantou1"></a>
                 <a href="javascript:;" class="iconfont icon-youjiantou1"></a>
            </div>

            <a href="" class="seckill_entry">
                <img src="./images/baoyou.png" alt="">
            </a>
        </div>
    </div>

    <!-- 6. 限时好物在京东 -->
    <div class="jd_container item_ele">
        <img src="./images/11.png" alt="">
    </div>
    <!-- 7. 频道广场 -->
    <div class='jd_container item_ele'>
        <img src="./images/22.png" alt="">
    </div>

      <!-- 8. 为你推荐 -->
      <div class='jd_container item_ele'>
        <img src="./images/33.png" alt="">
        <img src="./images/44.png" alt="">
        <img src="./images/55.png" alt="">
        <img src="./images/66.png" alt="">

    </div>

    <!-- 9. 楼宇导航 -->
    <div class="elevator">
          <!--  elevator_active -->
        <ul class="elevator_list">
            <li class='elevator_item'>
                <a href="javascript:;" class="elevator_lk ">
                    <span class="elevator_lk_bg"></span>
                    <span class="elevator_lk_txt">京东秒杀</span>
                </a>
            </li>
            <li class='elevator_item'>
                <a href="javascript:;" class="elevator_lk">
                    <span class="elevator_lk_bg"></span>
                    <span class="elevator_lk_txt">京东618</span>
                </a>
            </li>
            <li class='elevator_item'>
                <a href="javascript:;" class="elevator_lk">
                    <span class="elevator_lk_bg"></span>
                    <span class="elevator_lk_txt">频道广播</span>
                </a>
            </li>
            <li class='elevator_item'>
                <a href="javascript:;" class="elevator_lk">
                    <span class="elevator_lk_bg"></span>
                    <span class="elevator_lk_txt">为你推荐</span>
                </a>
            </li>
            <li class='elevator_item'>
                <a href="javascript:;" class="elevator_lk">
                    <span class="elevator_lk_bg"></span>
                    <span class="elevator_lk_txt">客服</span>
                </a>
            </li>
            <li class='elevator_item last_item'>
                <a href="javascript:;" class="elevator_lk">
                    <span class="elevator_lk_bg"></span>
                    <span class="elevator_lk_txt">返回顶部</span>
                </a>
            </li>
        </ul>
    </div>

    <script src="./js/index.js"></script>
</body>

</html>